<template>
    <!-- 菜单显示列表 -->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="menu_name" label="菜单名称" width="100" />
        <el-table-column prop="menu_url" label="菜单Url" width="150" />
        <el-table-column prop="pid" label="父级菜单名称" width="150" ></el-table-column>
        <el-table-column prop="type" label="类型" width="150" ></el-table-column>
        <el-table-column prop="create_by" label="创建人" width="100" align="center"/>
        <el-table-column prop="create_date" label="创建日期" width="180" align="center">
            <template v-slot="scope">
                <span v-if="scope.row.create_date!=null"> {{ scope.row.create_date.replace('T',' ').substring(0,19) }}</span>
               
            </template>
        </el-table-column>
        <el-table-column prop="id" fixed="right" label="操作" width="100" align="center">
            <template v-slot="scope">
                <el-link  size="small" @click="DelMenu(scope.row.id)">删除</el-link>
           </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
            <table>
                <tr>
                    <td>
                        <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize" prev-text="上一页"
                            next-text="下一页" :page-sizes="[3, 5, 7]" :background="true" layout="total, slot,sizes"
                            :total="page.totalCount">
                            ，当前是{{ page.pageIndex }}/{{ page.totalPage }}页，每页{{ page.pageSize }}条
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize" prev-text="上一页"
                            next-text="下一页" :page-sizes="[3, 5, 7]" :background="true" layout=" slot, prev, pager, next"
                            :total="page.totalCount">
                            <el-button :disabled="page.pageIndex == 1" @click="page.pageIndex = 1">首页</el-button>
                        </el-pagination>
                    </td>
                    <td>
                        <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize" prev-text="上一页"
                            next-text="下一页" :page-sizes="[3, 5, 7]" :background="true" layout=" slot, jumper"
                            :total="page.totalCount">
                            <el-button :disabled="page.pageIndex == page.totalPage"
                                @click="page.pageIndex = page.totalPage">尾页</el-button>
                        </el-pagination>
                    </td>
                </tr>
            </table>
</template>
    
<script setup lang='ts'>
import axios from 'axios';
import { ref,reactive,onMounted,watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import http from '../http.js'

const page = reactive({
    pageIndex: 1,
    pageSize: 8,
    totalPage: 0,
    totalCount:0
})

//分页
watch(page,() => {
    GetMenu();
})


onMounted(() => {
    GetMenu();//菜单列表
})
//显示菜单列表
const tableData = ref([])
const GetMenu = () => {
    axios.get(http.RBACdu + '/api/Menu/MenuShow', {
        params: {
            pageIndex: page.pageIndex,
            pageSize:page.pageSize
        }
    })
    .then(res => {
        tableData.value = res.data.data.list
        page.totalPage = res.data.data.totalPage
        page.totalCount = res.data.data.totalCount
    })
    .catch(err => {
        console.log(err)    
    })
}
//菜单列表删除
const DelMenu = (id: any) => {
    ElMessageBox.confirm(
    '你真的要删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
    )
    .then(() => {
        axios.post(http.RBACxie+'/api/Menu/menuDelete',[id])
        .then(res => {
            if (res.data.code ==200) {
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
                GetMenu();
            }    
            else {
                ElMessage({
                    type: 'error',
                    message: '删除失败',
                })
                return
            }
        })
    })
    .catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除',
        })
    })
}


    
</script>
    
<style>
    
</style>